#{include file="../Common/Header.html"}
<div class="layui-container fly-marginTop fly-user-main">
    #{include file="../Common/Nav.html"}
    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <div class="content-header">
                <i class="layui-icon">&#xe638;</i> 充值余额
            </div>

            <div class="content-body">
                <blockquote class="elem-quote">
                    当前元气：<b style="color: #0C84D1;">#{$user.recharge}</b>，您当前用户等级：<b
                            style="color: #0C84D1;">#{$user.group.name}</b>，购物时可以享受：<b
                            style="color: #0C84D1;">#{$user.group.discount*100}%折扣</b>
                    #{if $groupNext}，升级到
                        <b style="color: #8d16e3;">#{$groupNext.name}[折扣:#{$groupNext.discount*100}%]</b>
                        还需要充值
                        <b style="color: #8d16e3;">¥#{$groupNext.recharge-$user.recharge}</b>
                    #{/if}
                </blockquote>

                <form class="layui-form" action="">
                    <div class="form-block">
                        #{if $config.recharge_welfare == 1 && count($welfareConfig) > 0}
                            <div style="margin-top: 25px;">
                                <div class="form-body">
                                    #{foreach $welfareConfig as $wc}
                                        <p style="color: #108d25;padding-bottom: 5px;">一次性充值<b
                                                    style="color: #f15858;">￥#{$wc.recharge}</b>，赠送<b
                                                    style="color: #6a71f1;">￥#{$wc.amount}</b></p>
                                    #{/foreach}
                                </div>
                            </div>
                        #{/if}
                        <div>
                            <div class="form-header">金额 <span
                                        style="color: #63b584;font-size: 14px;">当前余额:￥#{$user.balance}</span></div>
                            <div class="form-body"><input type="text" name="amount" required lay-verify="required"
                                                          value="#{if $config.recharge_min == 0}10#{else}#{$config.recharge_min}#{/if}" autocomplete="off" class="layui-input"
                                                          style="width: 150px;color: #ff9191;"></div>
                        </div>
                        <div>
                            <div class="form-header">支付方式</div>
                            <div class="form-body pay-list"></div>
                        </div>

                        <div style="margin-top: 25px;">
                            <button type="button" class="layui-btn layui-btn-pink payButton">立即充值</button>
                        </div>

                        <div>
                            <div class="form-header">修炼等级划分（<span style="color: #0a53be;">说明：充值/消费可获得元气，比例1:1</span>）</div>
                            <div class="form-body">
                                <table class="layui-table">
                                    <thead>
                                    <tr>
                                        <td>等级</td>
                                        <td>所需元气</td>
                                        <td>购物折扣</td>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    #{foreach $groups as $g}
                                        <tr>
                                            <td><img src="#{$g.icon}" style="height: 32px;"> <span class="layui-badge layui-bg-gray">#{$g.name}</span></td>
                                            <td style="color: #f68b8b;font-weight: bolder;">#{$g.recharge}</td>
                                            <td>#{$g.discount*100}%</td>
                                        </tr>
                                    #{/foreach}
                                    </tbody>
                                </table>
                            </div>
                        </div>


                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    let payId = 0;

    function payClick(obj, id) {
        User.switchElement(obj);
        payId = id;
    }

    $(function () {
        layui.use('layer', function () {
            User.getPay(res => {
                res.forEach(item => {
                    $('.pay-list').append('<a class="button-click" onclick="payClick(this,' + item.id + ')" style="line-height: 22px;color: #db66ac;"> <img src="' + item.icon + '" class="pay-icon"> ' + item.name + '</a>');
                });
            });
            $('.payButton').click(function () {
                User.trade({
                    pay_id: payId,
                    amount: $('input[name=amount]').val()
                }, res => {
                    window.location.href = res.url;
                });
            });
        });
    });

</script>
#{include file="../Common/Footer.html"}
